<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom :bgColor="bgColor" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">开工</block>
				<view slot="right" @tap=""></view>
			</cu-custom>
			<view class="header">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
					<view class='cuIcon-search'></view>
					<input v-model="searchText" confirm-type="search" @confirm="onInput" focus="true" class="input"
						type="text" placeholder="扫描或输入条码" />
					<!-- <input v-model="searchText" @input="onInput" focus="true" class="input" type="text" placeholder="扫描或输入条码" /> -->
					<view class='cuIcon-scan' @tap="scanCode" style="transform: scale(1.6,1.6);color: #c6c6c6;"></view>
				</view>
			</view>

			<view class="cu-form-group" style="margin-bottom: 10upx;">
				<view class="title"><text>工序:</text></view>
				<view class="uni-list-cell-db">
					<picker @change="bindGongxuChange" :value="indexGongxu" :range="gongxuPickerList">
						<view class="picker">{{gongxuPickerList[indexGongxu]}}</view>
					</picker>
				</view>
			</view>

			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-card dynamic" v-for="(item,index) in productList" :key="index">
					<view class="cu-item shadow" :style="{'background-color':color===1?'#3bade3':'#f37b1d'}">
						<view class="text-content">
							条码： {{item.barcode}}
						</view>
						<view class="text-content">
							产品： {{item.matnr}} {{item.maktx==null?'':item.maktx}}
						</view>
						<view class="text-content" v-if="afs">
							颜色尺码：{{item.colorName}} {{item.sizeName}}
						</view>
						<view class="text-content">
							<view class="num">合格数：{{item.gmnga}}</view>
							<!-- <input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.gmnga"
								name="gmnga" /> -->
						</view>
						<view class="text-content">
							<view class="num">不合格数：{{item.xmnga==null?'':item.xmnga}}</view>
							<!-- <input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.xmnga"
								name="xmnga" /> -->
						</view>
						<view class="text-content">
							<view class="num" style="">工时：{{item.ism01==null?'0.00':item.ism01}}</view>
							<!-- <input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.ism01"
								name="ism01" /> -->
						</view>
					</view>
					<button style="background-color: #09BB07; width: 66vw;font-size: 32rpx;margin-top: 30rpx;" v-show="item.startShow==1" @click="kaiGong(1)">开始</button>
					<button type="warn" style="width: 66vw; font-size: 32rpx;margin-top: 30rpx"  v-show="item.stopShow==1" @click="kaiGong(2)">暂停</button>
					<button style="background-color: orange; width: 66vw; font-size: 32rpx;margin-top: 30rpx"  v-show="item.continueShow==1" @click="kaiGong(3)">继续</button>
				</view>
			</form>
		</scroll-view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import api from '@/api/api.js'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				title: '下拉刷新 + 加载更多',
				data: [],
				productList: [],
				barcodeMap: new Map(),
				chooseList: [],
				array: [],
				index: 0,
				pageNo: 1,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				date: new Date().toISOString().slice(0, 10),
				searchText: "",
				filterText: '',
				code: '',
				imageList: [],
				gongxuPickerList: ['请选择'],
				gongxuList: [],
				indexGongxu: 0,
				senddata: {
					sampleAndResult: {
						vornr: "",
					}
				},
				afs: false,
				color: 0,
				bgColor: 'bg-green',
				showFinish: 'false',

			};
		},

		// 导航搜索栏监听搜索事件
		onNavigationBarSearchInputConfirmed(e) {
			// 搜索框内容 : e.text
			// console.log(e.text);
		},
		onLoad() {
			let url = '/dcloud/sysPara/sysPara/list'
			let that = this
			this.$http.get(url, {
				params: {
					para: "confirmationShowFinish",
				}
			}).then(res => {
				if (res.data.success) {
					this.showFinish = res.data.result.records[0].value
				}
			}).catch(err => {
				console.log(err);
			});
		},
		onShow() {
			let submitBack = uni.getStorageSync("submitBack")
			if (submitBack) {
				this.productList = []
				uni.removeStorageSync('submitBack')
				this.searchText = ''
			}
			if (uni.getStorageSync("industry") == 'afs') {
				this.afs = true
			}
			this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
			// this.load();
			this.getGongxuList();
			this.searchText.focus;
		},
		onUnload() {
			this.max = 0,
				// this.data = [],
				this.productList = [],
				this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				//	this.pageNo = this.pageNo + 1;
				// this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			onInput(e) {
				let barcode = e.detail.value
				if (barcode.length < 6 || barcode == '') {
					console.log(barcode.length)
					return;
				}
				// this.searchText=""
				if (this.indexGongxu == 0) {
					this.searchText = ""
					this.$tip.toast('请先选择工序')
					return;
				}

				if (this.barcodeMap.get(barcode)) {
					this.searchText = ""
					this.$tip.toast('条码已扫描')
					return;
				}
				let that = this;
				let url = '/confirmation/confirmation/listWorkBench'
				let i = this.indexGongxu - 1;
				let vornr = this.gongxuList[i].operationCode
				that.productList = []
				this.$http.get(url, {
					params: {
						barcode: barcode,
						vornr: vornr,
						showFinish: that.showFinish
					},
				}).then(res => {
					// that.searchText=""
					if (res.data.success && res.data.result.records.length > 0) {
						let item = {
							barcode: barcode,
							aufnr: res.data.result.records[0].aufnr,
							dispatchNo: res.data.result.records[0].dispatchNo,
							vornr: res.data.result.records[0].vornr,
							matnr: res.data.result.records[0].matnr,
							maktx: res.data.result.records[0].maktx,
							aufnr: res.data.result.records[0].aufnr,
							color: res.data.result.records[0].color,
							colorName: res.data.result.records[0].colorName,
							size: res.data.result.records[0].size,
							sizeName: res.data.result.records[0].sizeName,
							gmnga: parseInt(res.data.result.records[0].barcodeCount),//合格
							xmnga:res.data.result.records[0].xmnga,//不合格
							ism01: res.data.result.records[0].ism01,//工时

							startShow: res.data.result.records[0].startShow,
							stopShow: res.data.result.records[0].stopShow,
							continueShow: res.data.result.records[0].continueShow,
							completeShow: res.data.result.records[0].completeShow

						}
						// that.productList.push(item)
						that.productList.splice(0, 0, item);
						// that.barcodeMap.set(barcode, barcode);
						if (this.color == 0) {
							this.color = 1
							this.bgColor = 'bg-green'
						} else {
							this.color = 0
							this.bgColor = 'bg-orange'
						}
						// this.searchText=""
					} else {
						this.$tip.toast('条码不存在或已完工')
					}
				}).catch(err => {
					console.log(err);
				});
			},
			initData() {
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 300);
			},
			getGongxuList() {
				let url = '/mcOperation/mcOperation/list2'
				this.$http.get(url, {
					params: {
						pageSize: 30
					}
				}).then(res => {
					if (res.data.success) {
						this.gongxuList = [];
						let operationCode = uni.getStorageSync("operationCode");
						let i = 0;
						res.data.result.records.forEach(item => {
							this.gongxuPickerList.push(item.operationName)
							this.gongxuList.push(item)
							i++
							if (operationCode !== null & operationCode == item.operationCode) {
								this.indexGongxu = i;
							}
						})

					}
				}).catch(err => {
					console.log(err);
				});

			},
			scanCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						that.searchText = res.result;
						let e = {};
						e.detail = {};
						e.detail.value = res.result;
						that.onInput(e);
					}
				});
			},
			bindGongxuChange: function(e) {
				this.indexGongxu = e.target.value
				let i = this.indexGongxu - 1;
				if (i >= 0) {
					uni.setStorageSync('operationCode', this.gongxuList[i].operationCode);
				}
			},

			// saveData() {
			// 	if (this.indexGongxu == 0) {
			// 		this.$tip.alert('请选择工序');
			// 		return;
			// 	}
			// 	if (this.productList.length == 0) {
			// 		this.$tip.alert('没有扫描数据');
			// 		return;
			// 	}
			// 	if (this.afs) {
			// 		uni.navigateTo({
			// 			url: '/pages/mcloud/scanSubmit?data=' + JSON.stringify(this.productList),
			// 		});
			// 	} else {
			// 		let url = '/confirmation/confirmation/addBatch'
			// 		this.$http.post(url, this.productList, {
			// 			emulateJSON: true
			// 		}).then(res => {
			// 			if (res.data.success) {
			// 				if (res.statusCode == "200") {
			// 					uni.showToast({
			// 						// icon: 'none',
			// 						title: '保存成功'
			// 					});
			// 					this.searchText = ""
			// 					this.productList = []
			// 					this.barcodeMap = []
			// 				}
			// 			}
			// 		}).catch(err => {
			// 			console.log(err);
			// 		});
			// 	}

			// },

			kaiGong(type) {
				if (this.indexGongxu == 0) {
					this.$tip.alert('请选择工序');
					return;
				}
				if (this.productList.length == 0) {
					this.$tip.alert('没有扫描数据');
					return;
				}

				//type 123
				this.productList[0].type = type
				//
				let that = this;
				let url = '/confirmation/confirmation/addStart'
				this.$http.post(url, this.productList[0], {
					emulateJSON: true
				}).then(res => {
					if (res.data.success) {
						if (res.statusCode == "200") {
							uni.showToast({
								// icon: 'none',
								title: '保存成功'
							});
							this.searchText = ""
							this.productList = []
							this.barcodeMap = new Map()
						}
					}
				}).catch(err => {
					console.log(err);
				});

			}


		}
	}
</script>
<style>
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}


	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #FFFFFF;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.cu-card>.cu-item {
		margin-bottom: 5px;
		margin-top: 10px;
	}

	.cu-card.dynamic>.cu-item>.text-content {
		margin-bottom: 1px;
		margin-top: 6px;
	}

	.date {
		height: 260rpx;
		text-align: center;
		background-color: #0081ff;
		color: #FFFFFF;
		word-break: break-all;
		margin-top: -1px;
	}

	.text {
		margin-top: 10rpx;
		word-break: break-all;
		color: #FFFFFF;
	}

	.baogong {
		margin-top: 6px;
		margin-botton: 6px;
		text-align: center;
		display: block;
		margin: 0 auto;
	}

	.mini-btn {
		text-align: center;
		border-radius: 15rpx;
		width: 200rpx;
		height: 70rpx;
		background-color: #0081ff;
		color: #FFFFFF;
	}

	button::after {
		border: none;
	}

	.num {
		float: left;
		width: 90px;
	}

	.numinput {
		border-bottom: 1px solid gray;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		text-align: center;
		vertical-align: middle;
	}
</style>
<style lang="scss">
	.uni-input {
		margin-bottom: -10upx;
	}
</style>
